import _ from 'lodash'
import printMe from './print.js'

function component() {
  const element = document.createElement('div')
  const btn = document.createElement('button')

  element.innerHTML = _.join(['Hello', 'webpack'], ' ')

  btn.innerHTML = 'Click me and check the console!'
  btn.onclick = printMe

  element.appendChild(btn)

  return element
}

document.body.appendChild(component())

// 当然, dynamic 动态引入也可以实现 lodash 库的代码分割
// async function getComponent() {
//   const element = document.createElement('div');
//   // webpack 提供的动态引入 import 语法, 返回一个 promise.
//   // 可能会根据计算后的变量(computed variable)导入特定模块时，可以通过向 import() 传入一个 动态表达式。
//   // 这种引入方法已经完成了代码分割
//   const { default: _ } = await import('lodash');
//   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
//   return element;
// }

// getComponent().then((component) => {
//   document.body.appendChild(component);
// });
